<template>
  <a-date-picker
    dropdownClassName="j-date-picker"
    :disabled="disabled || readOnly"
    :disabled-date="disabledDate"
    :placeholder="placeholder"
    @change="handleDateChange"
    :value="momVal"
    :showTime="showTime"
    :format="dateFormat"
    :getCalendarContainer="getCalendarContainer"
  />
</template>
<script>
import moment from 'moment'
export default {
  name: 'JDateLimit',
  props: {
    placeholder:{
      type: String,
      default: '',
      required: false
    },
    value:{
      type: String,
      required: false
    },
    dateFormat:{
      type: String,
      default: 'YYYY-MM-DD',
      required: false
    },
    //此属性可以被废弃了
    triggerChange:{
      type: Boolean,
      required: false,
      default: false
    },
    readOnly:{
      type: Boolean,
      required: false,
      default: false
    },
    disabled:{
      type: Boolean,
      required: false,
      default: false
    },
    showTime:{
      type: Boolean,
      required: false,
      default: false
    },
    getCalendarContainer: {
      type: Function,
      default: (node) => node.parentNode
    }
  },
  data () {
    let dateStr = this.value;
    return {
      decorator:"",
      momVal:!dateStr?null:moment(dateStr,this.dateFormat)
    }
  },
  watch: {
    value (val) {
      if(!val){
        this.momVal = null
      }else{
        this.momVal = moment(val,this.dateFormat)
      }
    }
  },
  methods: {
    moment,
    handleDateChange(mom,dateStr){
      this.$emit('change', dateStr);
    },
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },

    disabledDate(current) {
      // Can not select days before today and today
      return current && current > moment().endOf('day');
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
